<template>
	<view  class="col-auto col">
		<view class="gt-admin-list col-auto" >
			 
			<!-- 顶部 -->
			<view class="gt-admin-list-content col col-auto">
				<!-- 搜索 -->
				<gt-form v-if="template.search" :template="template.search" v-model="template.searchFormData"
					:selectList="template.selectList" :defaultClass="template.class || 'gt-form-border gt-form-sm row'"
					:btnClass="template.btnClass || 'btn btn-sm'"
					:defaultChildClass="template.defaultChildClass || 'gt-form-block-sm mr-10'"
					:defaultChildStyle="template.defaultChildStyle || ''" @submit="getListData"  @clickBack="clickBack"></gt-form>
				<!-- 列表 -->
				<view class="col-auto" style="overflow-y: auto;height: 300px;box-shadow:inset 0px 0px 5px #e5e5e5;border-radius: 10px;">
					<gt-admin-table class="col-auto" :table="template.table" :list="template.table.list"
						:selectList="template.selectList" @clickBack="clickBack"
						@selectRowBack="selectRowBack"></gt-admin-table>
				</view>
				
			</view>
			<view class="gt-admin-list-bottom">
				<gt-admin-page-info v-if="template.table.pageInfo && template.table.pageInfo.totalPage"
					:template="template.table" @pageInfoChange="pageInfoChange"></gt-admin-page-info>
			</view>
		</view>
		<!-- 弹层 -->
		<uni-popup ref="popup" :type="formTemplate.type || 'right'">
			<view style="background-color: #fff;overflow-y: auto;position: relative;"
				:style="TopNavExist ? 'height: calc( 100vh - 50px );' : 'height:100vh'">
				<view class="gt-popup-close" @click="closePopup">
					<uni-icons type="closeempty" class="gt-popup-close-icon"
						style="line-height: 24px;font-size: 22px;color:#999999;"></uni-icons>
				</view>
				<view class="popup-title">{{ formTemplate.title }}</view>
				<view class="pd-30" style="position:  relative;">
					<gt-form :template="formTemplate.form" :formData="formData" :selectList="template.selectList"
						@submit="formSubmit">
					</gt-form>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="view" :type="formTemplate.type || 'right'">
			<view style="background-color: #fff;overflow-y: auto;position: relative;"
				:style="TopNavExist ? 'height: calc( 100vh - 50px );' : 'height:100vh'">
				<view class="gt-popup-close" @click="closePopup">
					<uni-icons type="closeempty" class="gt-popup-close-icon"
						style="line-height: 24px;font-size: 22px;color:#999999;"></uni-icons>
				</view>
				<view class="popup-title">{{formTemplate.title}}{{ TopNavExist }}</view>
				<view class="pd-30" style="position:  relative;">
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "gt-admin-list",
		model: {
			prop: 'template',
			event: 'change'
		},
		props: {
			template: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		data() {
			return {
				searchData: {},
				formTemplate: {},
				formData: {},
				TopNavExist:false,
			}
		},
		created() {
			let dom = document.getElementsByTagName('uni-top-window');
			this.TopNavExist = dom.length > 0 ? true : false;
			// console.log(query.select('.uni-top-window1'))
			// let class = 'uni-top-window';

			if (this.template.batch) {
				this.template['batchSelectIndexList'] = [];
			}
			this.template['list'] = this.template['list'] || [];
			this.template['pageInfo'] = this.template['pageInfo'] || {};
			//搜索表单
			if (!this.template['searchFormData']) {
				let formData = {};
				for (let i in this.template.search.items) {
					let item = this.template.search.items[i];
					if (item.field) {
						formData[item.field] = item.value || '';
					}
				}
				this.template['searchFormData'] = formData;
			}
			this.template['selectList'] = this.template['selectList'] || {};
			if (this.template.tabList) {
				for (let i in this.template.tabList) {
					if (this.template.tabList[i].value) {
						let field = this.template.tabList[i].field;
						this.template.searchFormData[field] = this.template.tabList[i].value;
					}
				}
			}
			//获取数据列表
			this.getListData();
		},
		methods: {
			tabListChange(e) {
				console.log(e)
			},
			formSubmit(e) {
				if (e.response && e.response.msg) {
					this.getListData();
					this.$refs.popup.close();
				}
			},
			changeTemplate(e) {

			},
			clickBackPopup(item, data) {
				if (item.popup.form) {
					if (typeof item.popup.form == 'string' && this.template.form[item.popup.form]) {
						item.popup.form = this.template.form[item.popup.form];
					}
					if (item.url) {
						item.popup.form.url = item.url;
					}
					if (!item.popup.form.url) {
						// console.log('请求地址为空！');
						return;
					}
					if (data) {
						let formData = {};
						for (let i in item.popup.form.items) {
							let row = item.popup.form.items[i]
							if (row.field && data[row.field] && row.type == 'json' && row.items) {
								formData[row.field] = JSON.parse(data[row.field]);
								// console.log(formData[row.field]);
							}
							if (row.field && data[row.field] && row.type == 'json_array' && row.items) {
								formData[row.field] = JSON.parse(data[row.field]);
								// console.log(formData[row.field]);
							} else if (row.field && data.hasOwnProperty(row.field)) {
								formData[row.field] = data[row.field];
							} else {
								formData[row.field] = '';
							}
						}
						let urlParams = '';
						if (item.urlParams) {
							for (let i in item.urlParams) {
								let field = item.urlParams[i];
								if (!data[field]) {
									console.log('请求参数值不存在');
									return;
								} else {
									urlParams += urlParams ? '&' : '';
									urlParams += field + '=' + data[field];
								}
							}
						}
						item.popup.form.requestType = item.requestType || '';
						item.popup.form.url += urlParams ? '?' + urlParams : '';
						this.formTemplate = item.popup;
						this.formData = formData;
					} else {
						let formData = {};
						if (item.defaultFieldBySearch) {
							for (let index in item.defaultFieldBySearch) {
								let defaultField = item.defaultFieldBySearch[index];
								// console.log(this.template.searchFormData[defaultField]);
								if (this.template.searchFormData[defaultField] !== undefined) {
									formData[defaultField] = this.template.searchFormData[defaultField];
								}

							}
						}
						// console.log(formData);

						for (let i in item.popup.form.items) {
							let row = item.popup.form.items[i]
							if (row.field && row.type == 'json') {
								let tempJson = {};
								for (let i in row.items) {
									if (row.items[i].field) {
										tempJson[row.items[i].field] = '';
									}

								}
								formData[row.field] = tempJson;
							} else if (row.field && row.type == 'json_array') {
								let tempJson = {};
								let tempJsonArr = [];
								for (let i in row.items) {
									if (row.items[i].field) {
										tempJson[row.items[i].field] = '';
									}
								}
								tempJsonArr.push(tempJson);
								// console.log(tempJsonArr);
								formData[row.field] = tempJsonArr;
							} else if (row.field) {
								formData[row.field] = formData[row.field] === undefined ? '' : formData[row.field];
							}
						}
						this.formTemplate = item.popup;
						this.formData = formData;

					}
					// console.log(this.$refs.popup);
					this.$refs.popup.open();
				}
			},
			clickBack(item, data) {
				console.log('clickBack', item, data);
				if (!item) {
					this.getListData();
				} else if (item.type && item.type == 'search') { //搜索
					this.getListData({
						page: 1
					});
				} else if (item.type && item.type == 'batch') { //批量选择
					this.batch(item);
				} else if (item.click) { //回调点击事件
					let pages = getCurrentPages();
					let page = pages[pages.length - 1];
					item.click(item, data, page);
				} else if (item.popup) { //弹层
					this.clickBackPopup(item, data);
				} else if (item.type && item.type == 'urlPost') {
					this.urlPost(item, data);
				}
			},
			urlPost(item, data) {
				let _this = this;
				uni.showModal({
					content: '确认' + item.label,
					// showCancel: false,
					success(resp) {
						// console.log(resp)
						if (resp.confirm && item.url) {
							let getParams = {};
							for (let i in item.urlParams) {
								let field = item.urlParams[i];
								getParams[field] = data[field] || '';
							}
							_this.$post({
								url: item.url,
								data: getParams,
								type: item.requestType || '',
								afterFun(r) {
									if (!r.error) {
										_this.getListData();
									}
								}
							})
						}
					}
				});

			},
			selectRowBack(e) {
				console.log(e)
			},
			batch(item) {
				let _this = this;
				if (!item.url) {
					console.log('无 url 参数');
					return;
				}
				if (!item.field) {
					console.log('无 field 参数');
					return;
				}
				let params = '';
				for (let i in this.batchSelectIndexList) {
					let index = this.batchSelectIndexList[i];
					let row = this.template.list[index];
					if (row[item.field]) {
						params += params ? ',' : '';
						params += row[item.field];
					}
				}
				uni.showModal({
					title: '警告',
					content: this.confirmText,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_this.$post({
								url: item.url + '?' + item.field + '=' + params,
								afterFun(r) {
									if (r.msg) {
										_this.batchSelectIndexList = [];
										_this.getListData();
									}
									_this.$emit('batchCallBack', {
										response: r
									})
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			closePopup() {
				this.$refs.popup.close();
			},
			//获取选择列表
			getSelectListData() {
				let _this = this;
				if (this.template.selectListUrl) {
					for (let i in this.template.selectListUrl) {
						this.$get({
							url: this.template.selectListUrl[i],
							afterFun(resp) {
								if (resp) {
									// let template = _this.$tools.assginData(_this.template);
									let template = {
										..._this.template
									};
									// let p = {
									// 	list :{
									// 		lang:[{key:'***':val:'***'},...],
									// 		cate_en:[{key:'***':val:'***'},...],
									// 		cate_cn:[{key:'***':val:'***'},...],
									// 	}
									// }
									for (let field in resp.list) {
										template.selectList[field] = resp.list[field];
									}

									// console.log(_this.template)
									// _this.$set(_this.template.selectList,i,resp);
									_this.$emit('change', template)
								}
							},
						});
					}
				}
			},
			//获取数据列表
			getListData(params) {
				let _this = this;
				if (!this.template.table.listUrl) {
					console.log('未配置数据地址');
					return false;
				}
				// console.log('getListData');
				let page = params && params.page || (this.template.pageInfo.page ? this.template.pageInfo.page :
					1);
				let limit = params && params.limit || (this.template.pageInfo.limit || 10);
				let searchFormData = this.template.searchFormData || {};
				this.$get({
					url: _this.template.table.listUrl,
					data: {
						page: page,
						limit: limit,
						...searchFormData
					},
					afterFun(resp) {
						// let template = _this.$tools.assginData(_this.template);
						let template = {
							..._this.template
						};
						if (resp.list) {
							template.table.list = resp.list
						}
						if (resp.pageInfo) {
							template.table.pageInfo = resp.pageInfo;
						}
						_this.$emit('change', template)
						//获取选择列表
						_this.getSelectListData();
					},
				});
			},
			pageInfoChange(e) {
				this.getListData(e);
			}
		}
	}
</script>

<style lang="scss">



</style>